<template>
  <div>
    <ul>
      <!-- 导航入口 -->
      <!-- 声明式导航 -->
      <li><router-link to="/">首页</router-link></li>
      <li><router-link :to="{ name: 'gy'}">关于</router-link></li>
      <li><router-link to="/Hero">主角</router-link></li>
      <li><router-link to="/Order/xiaobai/20">菜单</router-link></li>
    </ul>
    <button @click="goHero">看主角</button>

    <div>
      <!-- 导航出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goHero = () => {
  // 编程式导航
  router.push('/Hero')
}

</script>

<style lang="scss">
.router-link-active {
    background-color: pink;
}
#nprogress .bar {
  background-color: rgb(131, 94, 226) !important;
}
</style>